<template>
  <el-dialog v-model="modelValue" title="新增" width="56%" @close="close">
    <el-form ref="form" :model="formData" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目编号" prop="number">
            <el-input v-model="formData.number"></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="formData.name"></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="项目级别" prop="level">
            <el-radio-group v-model="formData.level">
              <el-radio label="A">A</el-radio>
              <el-radio label="B">B</el-radio>
              <el-radio label="C">C</el-radio>
            </el-radio-group>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="品牌所属行业" prop="industry">
            <el-select v-model="formData.industry">
              <el-option
                v-for="item in industries"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="推广形式" prop="form">
            <el-input v-model="formData.form"></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="执行时间" prop="executionTime">
            <el-date-picker v-model="formData.executionTime" type="date">
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="性质" prop="nature">
            <el-input v-model="formData.nature"></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="账期/天" prop="billingPeriod">
            <el-input-number
              v-model="formData.billingPeriod"
              :min="0"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="来源部门" prop="department">
            <el-select v-model="formData.department">
              <el-option
                v-for="item in departments"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="销售负责人" prop="sell">
            <el-input v-model="formData.sell"></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="执行人" prop="executor">
            <el-input v-model="formData.executor"></el-input> </el-form-item
        ></el-col>
        <!-- <el-col :span="8">
          <el-form-item label="发布平台" prop="platform">
            <el-select v-model="formData.platform">
              <el-option
                v-for="item in platforms"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col> -->
        <el-col :span="8">
          <el-form-item label="合同金额/元" prop="contractAmount">
            <el-input-number
              v-model="formData.contractAmount"
              :min="0"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="执行成本/元" prop="executionCost">
            <el-input-number
              v-model="formData.executionCost"
              :min="0"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="返点" prop="rebate">
            <el-input-number
              v-model="formData.rebate"
              :min="0"
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="利润率" prop="profitMargin">
            <el-input
              disabled
              v-model="formData.profitMargin"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="执行数量" prop="executionNumber">
            <el-input-number
              v-model="formData.executionNumber"
              :min="0"
            /> </el-form-item
        ></el-col>

        <el-col :span="8">
          <el-form-item label="执行进展" prop="progress">
            <el-select v-model="formData.progress">
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <el-button type="primary" style="margin-bottom: 20px" @click="addAcount"
      >新增账号</el-button
    >
    <AccountTable :tableData="tableData" />
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="close">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, nextTick, toRefs } from "vue";
import { ElMessage } from "element-plus";
import AccountTable, { Account } from "./AccountTable.vue";
let id = 0;
const props = defineProps<{
  modelValue: boolean;
  initValue?: Execution;
}>();
const { modelValue, initValue } = toRefs(props);
const emit = defineEmits(["update:modelValue"]);
const form = ref();
const formData = ref<Execution>({
  number: "",
  name: "",
  level: "",
  industry: "",
  form: "",
  executionTime: "",
  nature: "",
  billingPeriod: 0,
  department: "",
  sell: "",
  executor: "",
  contractAmount: 0,
  executionCost: null,
  rebate: null,
  profitMargin: null,
  executionNumber: null,
  progress: "",
});
const tableData = reactive<Account[]>([]);
const departments = [
  { value: "巨量事业部", label: "巨量事业部" },
  { value: "大客户管理部", label: "大客户管理部" },
  { value: "洛丹伦武汉分部", label: "洛丹伦武汉分部" },
];
const industries = [
  { value: "母婴用品", label: "母婴用品" },
  { value: "日化个护", label: "日化个护" },
  { value: "两性、成人", label: "两性、成人" },
];
const platforms = [
  { value: "微博", label: "微博" },
  { value: "抖音", label: "抖音" },
  { value: "小红书", label: "小红书" },
];
const states = [
  { value: "未执行", label: "未执行" },
  { value: "已执行", label: "已执行" },
  { value: "执行成功", label: "执行成功" },
];
const close = () => {
  emit("update:modelValue", false);
  nextTick(form.value?.resetFields);
};
watch(modelValue, (modelValue, prev) => {
  if (modelValue && initValue?.value) {
    const newData = { ...initValue.value };
    nextTick(() => {
      formData.value = newData;
    });
  }
});
watch(
  [
    () => formData.value.contractAmount,
    () => formData.value.executionCost,
    () => formData.value.rebate,
  ],
  ([contractAmount, executionCost, rebate]) => {
    if (contractAmount && executionCost) {
      formData.value.profitMargin =
        Math.round(
          ((contractAmount - executionCost + (rebate || 0)) / contractAmount) *
            100
        ) / 100;
    } else {
      formData.value.profitMargin = null;
    }
  }
);
function addAcount() {
  if (tableData.find((item) => item.isEdit)) {
    ElMessage({
      message: "一次只能编辑一条",
      type: "warning",
    });
    return;
  }
  tableData.push({
    id: id++,
    name: "",
    platform: "",
    quotation: null,
    cost: null,
    rebate: null,
    isEdit: true,
  });
}
</script>
